<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="java">
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title th:text="${article.title}"></title>
    <link rel="stylesheet" type="text/css" href="/news.css"/>
    <style>
        /* 页面内的样式 */
        #table1 {
            width: 100%;
        }

        #table1 tr td {
            padding: 10px 10px;
        }

        h3 {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <h1>News Recommender System</h1>
    <p>
        当前位置：<a href="index">网站首页</a> >> <a
            th:href="'articleSearch?userId='+${user.id}">新闻列表</a> >> 查看新闻
    </p>
    <div id="content">
        <div id="main">
            <table id="table1">
                <h3 th:text="${article.title}"></h3>
                <tr>
                    <td>
                        <p th:text="${article.content}"></p>
                    </td>
                </tr>
            </table>
        </div>
        <div id="side">
            <div class="box">
                <p th:text="'用户名：'+${user.username}"></p>
                <p th:text="'性别：'+${user.gender}"></p>
                <p th:text="'出生年份：'+${user.birthYear}"></p>
            </div>
            <br>
            <div id="score_place" th:value="${score.interest}"></div>
            <br>
            <div class="box">
                <table>
                    <tr th:each="article,articleIndex:${recommendList}">
                        <td class="td_index" th:text="${articleIndex.count}"></td>
                        <td><a th:href="'articleView?articleId='+${article.id}+'&userId='+${user.id}"
                               th:text="${article.title}"></a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
<template id="no-scored">
    <form action="Score" method="post">
        <div class="box">
            <p>
                <strong>兴趣评分</strong>
            </p>
            <label for="input1">
                <input id="input1" value="1" type="radio" name="interest"/>1分
            </label>
            <label for="input2">
                <input id="input2" value="2" type="radio" name="interest"/>2分
            </label>
            <label for="input3">
                <input id="input3" value="3" type="radio" checked="checked" name="interest"/>3分
            </label>
            <label for="input4">
                <input id="input4" value="4" type="radio" name="interest"/>4分
            </label>
            <label for="input5">
                <input id="input5" value="5" type="radio" name="interest"/>5分
            </label>
            <p>
                <strong>质量评分</strong>
            </p>
            <label for="input11">
                <input id="input11" value="1" type="radio" name="quality"/>1分
            </label>
            <label for="input22">
                <input id="input22" value="2" type="radio" name="quality"/>2分
            </label>
            <label for="input33">
                <input id="input33" value="3" type="radio" checked="checked" name="quality"/>3分
            </label>
            <label for="input44">
                <input id="input44" value="4" type="radio" name="quality"/>4分
            </label>
            <label for="input55">
                <input id="input55" value="5" type="radio" name="quality"/>5分
            </label>
            <p>分数越高，越感兴趣</p>
            <input type="hidden" name="userId" th:value="${user.id}">
            <input type="hidden" name="articleId" th:value="${article.id}">
            <div style="text-align:center">
                <button type="submit">提交</button>
            </div>
        </div>
    </form>
</template>
<template id="scored">
    <div class="box">
        <p>
            <strong>您已评分</strong>
        </p>
        <p th:text="'兴趣评分：'+${score.interest}"></p>
        <p th:text="'质量评分：'+${score.quality}"></p>
    </div>
</template>
<script th:inline="javascript">
    let scorePlace = document.getElementById("score_place");
    if ([[${score.interest}]] === -1) {
        scorePlace.innerHTML = document.getElementById("no-scored").innerHTML;
    } else {
        scorePlace.innerHTML = document.getElementById("scored").innerHTML;
    }
</script>
</html>